<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Camera - p5.play</title>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="stylesheet" href="../assets/css/custom.css">
    <link rel="stylesheet" href="../assets/css/lucid.css">
    <link rel="stylesheet" href="../assets/vendor/bootstrap/css/bootstrap.css">
    <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
</head>
<body class="yui3-skin-sam">
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <h1 class="brand" style="padding: 10px 16px 10px; height: 20px; line-height: 20px; margin-left: 0;">
	    <img alt="p5.play" src="../../asterisk.png" style="max-height: 65%;" title="p5.play">
            p5.play
        </h1>
	<div class="nav">
            <li class="divider-vertical"></li>
            <li>
                <p class="navbar-text">
                    API Docs for Version: <b>1.0.0</b>
                </p>
            </li>
        </div>
        <form class="navbar-form pull-right" style="line-height: 40px; height: 40px;">
            <input style="margin-top: 0;" type="text" class="search-query" placeholder="Search for classes/modules..." data-obj='["classes/Animation", "classes/Camera", "classes/Group", "classes/p5.play", "classes/Sprite", "modules/p5.play"]'>
        </form>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="span3">
	    <div>
	        <div id="sidebar">
	        <div id="classes">
	            <ul id="api-classes" class="nav nav-list">
	                    <li><a href="../classes/Animation.html">Animation</a></li>
	                    <li><a href="../classes/Camera.html">Camera</a></li>
	                    <li><a href="../classes/Group.html">Group</a></li>
	                    <li><a href="../classes/p5.play.html">p5.play</a></li>
	                    <li><a href="../classes/Sprite.html">Sprite</a></li>
	            </ul>
	        </div>
	        </div>
	    </div>
        </div>
        <div class="span9">
                <form id="options-form" class="form-inline pull-right">
                    Show:
                    <label for="api-show-inherited" class="checkbox">
                        <input type="checkbox" id="api-show-inherited" checked>
                        Inherited
                    </label>
            
                    <label for="api-show-protected" class="checkbox">
                        <input type="checkbox" id="api-show-protected">
                        Protected
                    </label>
            
                    <label for="api-show-private" class="checkbox">
                        <input type="checkbox" id="api-show-private">
                        Private
                    </label>
                    <label for="api-show-deprecated" class="checkbox">
                        <input type="checkbox" id="api-show-deprecated">
                        Deprecated
                    </label>
            
                </form>
            
            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <div class="page-header">
                            <h1>Camera</h1>
                        </div>
                        
                        
                        
                        	<div class="well well-small">
                                    Module: <a href="../modules/p5.play.html">p5.play</a><br>
                                    Parent Module: <a href="../modules/p5.play.html">p5.play</a>
                            </div>
                        
                        
                        
                        <div class="yuidoc-class-description">
                        <p>A camera facilitates scrolling and zooming for scenes extending beyond
                        the canvas. A camera has a position, a zoom factor, and the mouse
                        coordinates relative to the view.
                        The camera is automatically created on the first draw cycle.</p>
                        <p>In p5.js terms the camera wraps the whole drawing cycle in a
                        transformation matrix but it can be disable anytime during the draw
                        cycle for example to draw interface elements in an absolute position.</p>
                        
                        </div>
                        
                        <!-- table of contents -->
                        
                        <div id="class-toc" class="page-section">
                        	<h2>Table of Contents</h2>
                            <ul>
                        		<li>
                        			<strong>Methods</strong>
                        			<ul>
                        				<li><a href="#method-off"><span class="im">off</span>()</a></li>
                        				<li><a href="#method-on"><span class="im">on</span>()</a></li>
                        			</ul>
                        		</li>
                        
                        		<li>
                        			<strong>Properties</strong>
                        			<ul>
                        				<li><a href="#prop-active"><span class="ip">active</span></a></li>
                        				<li><a href="#prop-mouseX"><span class="ip">mouseX</span></a></li>
                        				<li><a href="#prop-mouseY"><span class="ip">mouseY</span></a></li>
                        				<li><a href="#prop-position"><span class="ip">position</span></a></li>
                        				<li><a href="#prop-zoom"><span class="ip">zoom</span></a></li>
                        			</ul>
                        		</li>
                        
                        
                        	</ul>
                        </div>
                        
                        <!-- details -->
                        
                            <div class="constructor yuidoc-class-constructor page-section">
                                <h2>Constructor</h2>
                                <div class="item-list">
                                <div id="method-Camera" class="method item">
                                	<div class="method-signature">
                                	<span class="name"><code>Camera</code></span>
                                
                                		<div class="args">
                                			<span class="paren">(</span><ul class="args-list inline commas">
                                				<li class="arg">
                                						<code>x</code>
                                				</li>
                                				<li class="arg">
                                						<code>y</code>
                                				</li>
                                				<li class="arg">
                                						<code>zoom</code>
                                				</li>
                                			</ul><span class="paren">)</span>
                                		</div>
                                	</div>
                                
                                
                                
                                
                                
                                
                                	<div class="meta">
                                				<p>
                                				Defined in
                                		<a href="../files/lib_p5.play.js.html#l2155"><code>lib&#x2F;p5.play.js:2155</code></a>
                                		</p>
                                
                                
                                
                                	</div>
                                
                                
                                		<div class="params">
                                			<h4>Parameters:</h4>
                                
                                			<ul class="params-list">
                                				<li class="param">
                                						<code class="param-name">x</code>
                                						<span class="type">Number</span>
                                
                                
                                					<div class="param-description"><p>Initial x coordinate</p>
                                </div>
                                
                                				</li>
                                				<li class="param">
                                						<code class="param-name">y</code>
                                						<span class="type">Number</span>
                                
                                
                                					<div class="param-description"><p>Initial y coordinate</p>
                                </div>
                                
                                				</li>
                                				<li class="param">
                                						<code class="param-name">zoom</code>
                                						<span class="type">Number</span>
                                
                                
                                					<div class="param-description"><p>magnification</p>
                                </div>
                                
                                				</li>
                                			</ul>
                                		</div>
                                
                                
                                </div>
                                </div>
                            </div>
                        
                            <div id="methods" class="page-section">
                                <h2 class="off-left">Methods</h2>
                                <div class="item-list">
                                    <div id="method-off" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>off</code></span>
                                    
                                    		<span class="paren">()</span>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l2238"><code>lib&#x2F;p5.play.js:2238</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Deactivates the camera.
                                    The canvas will be drawn normally, ignoring the camera's position
                                    and scale until Camera.on() is called</p>
                                    </div>
                                    
                                    
                                    
                                    </div>
                                    <div id="method-on" class="method item">
                                    	<div class="method-signature">
                                    	<span class="name"><code>on</code></span>
                                    
                                    		<span class="paren">()</span>
                                    	</div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    	<div class="meta">
                                    				<p>
                                    				Defined in
                                    		<a href="../files/lib_p5.play.js.html#l2223"><code>lib&#x2F;p5.play.js:2223</code></a>
                                    		</p>
                                    
                                    
                                    
                                    	</div>
                                    
                                    	<div class="description"><p>Activates the camera.
                                    The canvas will be drawn according to the camera position and scale until
                                    Camera.off() is called</p>
                                    </div>
                                    
                                    
                                    
                                    </div>
                                </div>
                            </div>
                        
                            <div id="properties" class="page-section">
                                <h2 class="off-left">Properties</h2>
                        
                                <div class="item-list">
                                    <div id="prop-active" class="property item">
                                        <h3 class="name"><code>active</code></h3>
                                        <span class="type">Boolean</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l2213"><code>lib&#x2F;p5.play.js:2213</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>True if the camera is active.
                                    Read only property. Use the methods Camera.on() and Camera.off()
                                    to enable or disable the camera.</p>
                                    
                                        </div>
                                    
                                    
                                    
                                    </div>
                                    <div id="prop-mouseX" class="property item">
                                        <h3 class="name"><code>mouseX</code></h3>
                                        <span class="type">Number</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l2191"><code>lib&#x2F;p5.play.js:2191</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>MouseX translated to the camera view.
                                    Offsetting and scaling the canvas will not change the sprites' position
                                    nor the mouseX and mouseY variables. Use this property to read the mouse
                                    position if the camera moved or zoomed.</p>
                                    
                                        </div>
                                    
                                    
                                    
                                    </div>
                                    <div id="prop-mouseY" class="property item">
                                        <h3 class="name"><code>mouseY</code></h3>
                                        <span class="type">Number</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l2202"><code>lib&#x2F;p5.play.js:2202</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>MouseY translated to the camera view.
                                    Offsetting and scaling the canvas will not change the sprites' position
                                    nor the mouseX and mouseY variables. Use this property to read the mouse
                                    position if the camera moved or zoomed.</p>
                                    
                                        </div>
                                    
                                    
                                    
                                    </div>
                                    <div id="prop-position" class="property item">
                                        <h3 class="name"><code>position</code></h3>
                                        <span class="type">p5.Vector</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l2173"><code>lib&#x2F;p5.play.js:2173</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>Camera position. Defines the global offset of the sketch.</p>
                                    
                                        </div>
                                    
                                    
                                    
                                    </div>
                                    <div id="prop-zoom" class="property item">
                                        <h3 class="name"><code>zoom</code></h3>
                                        <span class="type">Number</span>
                                    
                                    
                                    
                                    
                                    
                                        <div class="meta">
                                                    <p>
                                                    Defined in
                                            <a href="../files/lib_p5.play.js.html#l2181"><code>lib&#x2F;p5.play.js:2181</code></a>
                                            </p>
                                    
                                    
                                        </div>
                                    
                                        <div class="description">
                                            <p>Camera zoom. Defines the global scale of the sketch.
                                    A scale of 1 will be the normal size. Setting it to 2 will make everything
                                    twice the size. .5 will make everything half size.</p>
                                    
                                        </div>
                                    
                                    
                                    
                                    </div>
                                </div>
                            </div>
                        
                        
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/vendor/jquery/jquery-1.8.2.min.js"></script>
<script src="../assets/vendor/bootstrap/js/bootstrap.js"></script>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script src="../assets/js/yuidoc-bootstrap.js"></script>
<script>prettyPrint();</script>
</body>
</html>
